<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <title>Title</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css" type="text/css"/>
    <link rel="stylesheet" href="/plugins/adminLte/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/css/global.css">
    <script type="text/javascript" src="/plugins/jquery.min.js"></script>
    <script type="text/javascript" src="/js/core/helper.js"></script>
    <script type="text/javascript" src="/plugins/layui/layui.js"></script>
    <script type="text/javascript" src="/js/core/utils.js"></script>
</head>
<body>
<div class="box box-primary">
    <div class="box-frame-with-header">
        <div class="box-header with-border">
            <h3 class="box-title">生成楼栋信息</h3>
        </div>
        <div class="box-body">
            <form class="layui-form " id="genAreaForm" action="/AreaCtrl/save.x">
                <div id="genBuildings">
                    <blockquote class="layui-elem-quote">区域可输入数字或字母,区域内栋数也可以输入数字或字母，字母都会以字母进行编号</blockquote>
                    <div class="layui-form-item">
                        <label class="layui-form-label">区域数量</label>
                        <div class="layui-input-inline">
                            <input type="text" name="title" lay-verify="title" value="1" autocomplete="off"
                                   placeholder="请输入区域数量" class="layui-input" id="sectionNum">
                        </div>
                        <button type="button" class="layui-btn layui-btn-normal" onclick="genSection()">生成区域</button>
                        <button type="button" class="layui-btn " onclick="genBuildings()">生成楼栋</button>
                    </div>
                    <div id="sections">
                    </div>
                </div>
                <div id="genRooms" style="margin-left: 20px">
                    <blockquote class="layui-elem-quote">楼栋别名会显示在选择楼栋的下拉框中，假如楼栋别名为空, 则按原有的楼栋编号显示</blockquote>
                    <div id="rooms" class="layui-form-pane">

                    </div>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-normal" onclick="getBack()">返回</button>
                        <button type="button" class="layui-btn " onclick="submitResult()">确定</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>
<script>
    var form;
    var layer;
    var success = false;
    /* 生成区域UI */
    function genSection() {
        $("#sections").empty();
        var sectionNum = $("#sectionNum").val();
        var iterator;

        if (!new RegExp("^[A-Z]$").test(sectionNum) && !new RegExp("^[0-9]+$").test(sectionNum)) {
            layer.alert("请输入数字或大写字母!");
            return;
        }
        /* 支持以字母表示区号 */
        var condition = /^[A-Z]$/;
        if (condition.test(sectionNum)) {
            iterator = 65;
            sectionNum = sectionNum.charCodeAt(0);
        } else {
            iterator = 1;
        }

        for (var i = iterator; i <= sectionNum; i++) {
            $("#sections").append(
                '<div class="layui-form-item sectionItem" >' +
                    '<label class="layui-form-label">区域编号</label>' +
                    '<div class="layui-input-inline">' +
                        '<input type="text" name="title" lay-verify="title" value="' + (iterator > 50 ? String.fromCharCode(i) : i) + '" autocomplete="off" placeholder="请输入区域数量" class="layui-input section">' +
                    '</div>' +
                        '<label class="layui-form-label">区域内栋数</label>' +
                        '<div class="layui-input-inline">' +
                        '<input type="text" name="title" lay-verify="title" value="1" autocomplete="off" placeholder="请输入该区域栋数" class="layui-input area">' +
                    '</div>' +
                    '<div class="layui-input-inline"><button type="button"  class="layui-btn layui-btn-danger sectionRemove" ">删除</button></div>' +
                '</div>'
            )
        }

        $(".sectionRemove").click(function () {
            $(this).parent().parent().remove();
        });
    }

    /* 根据每个区域的楼栋数量生成单元表UI */
    function genBuildings() {
        var areaIndex = 1;
        var sectionItem = $(".sectionItem");
        var length = sectionItem.length;
        if (length == 0) {
            layer.alert("请先生成区域!");
            return;
        }

        for (var i = 0; i < length; i++) {
            var areas = $(".sectionItem .area")[i].value;
            if (areas == '' || areas == 0) {
                layer.alert("楼栋数不能为空");
                return;
            }

            var iterator;
            /* 支持以字母表示楼栋号 */
            var condition = /^[A-Z]$/;
            if (condition.test(areas)) {
                iterator = 65;
                areas = areas.charCodeAt(0);
            } else {
                iterator = 1;
            }

            var section = $(".sectionItem .section")[i].value;
            for (var j = iterator; j <= areas; j++) {
                $("#rooms").append(
                    '<div class="layui-form-item roomsItem" >' +
                    '<label class="layui-form-label">' + areaIndex + '栋</label>' +
                    '<label class="layui-form-label">楼栋别名</label>' +
                    '<div class="layui-input-inline">' +
                    '<input type="text" name="buildingAlias" lay-verify="title" value="' + (length > 1 ? section + '区' : '') + (j > 50 ? String.fromCharCode(j) : appendZero(j)) + '栋" class="layui-input buildingAlias"></input>' +
                    '</div>' +
                    '<input type="hidden" name="areaParams" value="" class="areaParams"></input>' +
                    '<input type="hidden" name="areaName" value="' + areaIndex + '" class="areaName"></input>' +
                    '<input type="hidden" name="sectionName" value="' + section + '" class="sectionName"></input>' +
                    '<input type="hidden" name="areaNumInSection" value="' + (j + 1 - iterator) + '" class="areaNumInSection"></input>' +

                    '<label class="layui-form-label">单元数</label>' +
                    '<div class="layui-input-inline">' +
                        '<input type="text" name="buildingNum" lay-verify="title" value="1" autocomplete="off" placeholder="请输入该栋单元数" class="layui-input buildingNum">' +
                    '</div>' +
                    '<label class="layui-form-label">设备数</label>' +
                    '<div class="layui-input-inline">' +
                        '<input type="text" name="devNum" lay-verify="title" value="1" autocomplete="off" placeholder="请输入该单元设备数" class="layui-input devNum">' +
                    '</div>' +
                    '<div class="layui-input-inline">' +
                        '<button type="button"  class="layui-btn layui-btn-danger buildingsRemove" ">删除</button>' +
                        '<input type="checkbox" title="别墅" class="isVilla"></div>' +
                    '</div>'
                )
                areaIndex++;
            }
            $("#rooms").append('<hr>');
            $(".buildingsRemove").click(function () {
                $(this).parent().parent().remove();
            });
            $("#genBuildings").hide();
            $("#genRooms").show();
            form.render();
        }
    }

    function getBack(commCode) {

        if(success) {
            layer.confirm("创建楼栋成功,是否继续创建楼层房间?", {icon: 1, btn: ['确定', '取消']}, function () {
                window.location.href = "/pages/business/buildingDim/query.html?commCode=" + commCode;
            }, function () {
                success = false;
                $("#rooms").empty();
                $("#genRooms").hide();
                $("#genBuildings").show();
            })
        }else{
            $("#rooms").empty();
            $("#genRooms").hide();
            $("#genBuildings").show();
        }

    }

    function submitResult() {
        success = false;
        $.post(
            "/AreaCtrl/checkAreaGen.x?commCode=${commCode}",        //服务器要接受的url
            $("#genAreaForm").serialize(),     //传递的参数
            function cbf(data) { //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据
                if (data.ret_code == -1) {
                    layer.alert(data.data);
                    return;
                } else {
                    var successNum = 0;
                    for (var i = 0; i < $(".roomsItem").length; i++) {
                        /* 提取每一行的数据 */
                        var sectionName = $(".roomsItem").eq(i).children("input.sectionName").val();
                        var areaNumInSection = $(".roomsItem").eq(i).children("input.areaNumInSection").val();
                        var areaName = $(".roomsItem").eq(i).children("input.areaName").val();
                        var alias = $(".roomsItem").eq(i).children().children("input.buildingAlias").val();
                        var buildings = $(".roomsItem").eq(i).children().children("input.buildingNum").val();
                        var devs = $(".roomsItem").eq(i).children().children("input.devNum").val();
                        var isVilla = $(".roomsItem").eq(i).children().children("input.isVilla").is(':checked')?1:0;

                        /* 将一行的所有数据打在一个input中提交 */
                        $(".roomsItem").eq(i).children("input.areaParams").val(areaName + "-" + buildings + "-" + sectionName + "-" + alias + "-" + devs + "-" + areaNumInSection +"-"+isVilla);
                        console.log($(".roomsItem").eq(i).children("input.areaParams").val());

                    }
                    postJson(
                        "/AreaCtrl/addBatchs.x?commCode=${commCode}&commName=${commName}",        //服务器要接受的url
                        $("#genAreaForm").serialize(),     //传递的参数
                        function cbf(data) { //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据
                            success = true;
                            getBack('${commCode}');
                        }
                    );
                }
            },
            'json' //数据传递的类型  json
        );


    }

    layui.use(['form', 'element'], function () {
        form = layui.form();
        layer = layui.layer;
        $("#genRooms").hide();
    });
</script>